<template>
  <div id="topic-detail">
    <v-top-back siteName="Vue-CN-Node社区 话题详情"></v-top-back>
    <div class="scroll-wrapper">
      <v-scroll v-if="topicData && !error" ref="scroll" @reFresh="refresh"
                :data="topicData"
                :pulldown=true
                :scrolltop=true
                :probe-type="probeType"
                :listen-scroll="listenScroll">
        <div class="detail-content">
          <div class="author">
            <div class="avatar" @click="lookUserInfo(topicData.author.loginname,$event)">
              <img :src="topicData.author.avatar_url">
            </div>
            <div class="info">
              <div class="left">
              <span class="name"
                    @click="lookUserInfo(topicData.author.loginname,$event)">{{topicData.author.loginname}}</span>
                <span class="create-time">发布于 &nbsp;{{topicData.create_at}}</span>
              </div>
              <div class="right">
                <div class="lz"><span>作者</span></div>
                <div class="collect" @click="checkCollect(isCollect,$event)" :class="{'active':isCollect}">
                  <span>{{isCollect ? '取消收藏' : '收藏'}}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="topic-center">
            <div class="topic-info">
              <div class="topic-tips">
                <span class="top" v-if="topicData.top">置顶</span>
                <span class="good" v-if="topicData.good">精华</span>
                <span :class="topicData.tab">{{ tabName(topicData.tab) }}</span>
              </div>
              <div class="topic-title">
                <span class="title">{{topicData.title}}</span>
              </div>
              <div class="topic-reply-count">
                <span class="last-reply">最后回复于 &nbsp;{{topicData.last_reply_at}}</span>
                <div class="topic-count">
                  <span class="browse"><i class="iconfont icon-attention"></i>{{topicData.visit_count}}</span>
                  <!--<span class="comment"><i class="iconfont icon-comment_light"></i>{{topicData.reply_count}}</span>-->
                </div>
              </div>
            </div>
            <div class="topic-content" v-html="topicData.content"></div>
          </div>
          <div class="reply-list">
            <div class="reply" v-for="(reply,index) in topicData.replies">
              <div class="reply-info">
                <div class="avatar" @click="lookUserInfo(reply.author.loginname,$event)">
                  <img v-lazy="reply.author.avatar_url">
                </div>
                <div class="info">
                  <div class="left">
                  <span class="name"
                        @click="lookUserInfo(reply.author.loginname,$event)">{{reply.author.loginname}}</span>
                    <span class="create-time">回复于 &nbsp;{{formatTime(reply.create_at)}}</span>
                  </div>
                  <div class="right">
                    <div class="top-group">
                      <span class="lz" v-if="topicData.author.loginname === reply.author.loginname">作者</span>
                      <span class="index">#{{index + 1}}</span>
                    </div>
                    <div class="bottom-group">
                    <span class="like" @click="likeUps(reply.id,$event)" :class="{'uped':reply.is_uped}"><i
                      class="iconfont icon-appreciate_light"></i>({{reply.ups.length}})</span>
                      <span class="toreply" @click.stop="replyComment(reply.id,reply.author.loginname,$event)"><i
                        class="iconfont icon-mark"></i></span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="reply-content" v-html="reply.content"></div>
            </div>
          </div>
        </div>
      </v-scroll>
    </div>
    <v-comment v-if="showComment && topicData" :commentCount="topicData.reply_count"
               :topicId="topicData.id" @reFresh="commentRefresh" ref="comment"></v-comment>
    <div class="error-wrapper" v-if="error">
      <v-error-tip :error="error"></v-error-tip>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import TopBack from 'components/top-back/top-back'
  import Scroll from 'base/scroll/scroll'
  import Comment from 'components/comment/comment'
  import {mapActions, mapGetters} from 'vuex'
  import moment from 'moment'
  import {trim} from 'common/js/util'
  import {checkLogin, Alert, isLogin, Loading} from 'common/js/mixin'
  import {collect, deCollect} from 'api/topics'
  import ErrorTip from 'base/error-tip/error-tip'

  moment.locale('zh-cn')

  export default {
    mixins: [checkLogin, isLogin, Alert, Loading],
    name: 'topic-detail',
    data() {
      return {
        id: this.$route.params.id,
        topicData: null,
        showComment: true,
        is_Collect: null,
        error: '',
        tab: {
          'share': '分享',
          'ask': '问答',
          'job': '招聘',
          'dev': '客户端'
        },
        likeAction: {
          'up': '点赞成功',
          'down': '取消点赞成功'
        }
      }
    },
    computed: {
      ...mapGetters([
        'topicDetail',
        'userInfo'
      ]),
      isCollect() {
        if (typeof this.is_Collect === 'object') {
          if (this.topicData.is_collect) {
            return true
          } else {
            return false
          }
        } else if (typeof this.is_Collect === 'boolean') {
          return this.is_Collect
        } else {
          return false
        }
      }
    },
    created() {
      this.probeType = 2
      this.listenScroll = true
      this._getTopicDetail()
    },
    mounted() {
      this.$nextTick(() => {
        if (this.$refs.scroll) {
          setTimeout(() => {
            this.$refs.scroll.refresh()
          }, 20)
        }
      })
    },
    methods: {
      tabName(key) {
        return this.tab[key]
      },
      formatTime(time) {
        return moment(time).startOf().fromNow()
      },
      refresh() {
        this._getTopicDetail().then((res) => {
          if (res === true) {
            this.refreshOver(res)
          }
        })
      },
      refreshOver(status) {
        this.$refs.scroll.refreshOver(status)
      },
      commentRefresh() {
        this._getTopicDetail().then((res) => {
        })
      },
      // 查看用户信息
      lookUserInfo(loginname, event) {
        if (!event._constructed) {
          return
        }
        this.$router.push({name: 'user', params: {username: loginname}})
      },
      checkCollect(state, event) {
        if (!event._constructed) {
          return
        }
        this._checkLogin().then((res) => {
          if (res === true) {
            if (state === true) {
              deCollect(this.id, trim(this.userInfo.user_token)).then((res) => {
                if (res.success === true) {
                  this.showAlert({
                    content: '已取消收藏'
                  })
                  this.is_Collect = false
                } else {
                  this.showAlert({
                    style: 'warning',
                    content: res.error_msg
                  })
                }
              })
            } else {
              collect(this.id, trim(this.userInfo.user_token)).then((res) => {
                if (res.success === true) {
                  this.showAlert({
                    content: '已成功收藏'
                  })
                  this.is_Collect = true
                } else {
                  this.showAlert({
                    style: 'warning',
                    content: res.error_msg
                  })
                }
              })
            }
          }
        })
      },
      likeUps(id, event) {
        if (!event._constructed) {
          return
        }
        this._checkLogin().then((res) => {
          if (res === true) {
            this.checkUp({
              id: id,
              token: trim(this.userInfo.user_token)
            }).then((res) => {
              if (res.success === true) {
                this.showAlert({
                  content: this.likeAction[res.action]
                })
              } else {
                this.showAlert({
                  style: 'warning',
                  content: res.error_msg
                })
              }
            })
          }
        })
      },
      replyComment(id, loginname, event) {
        if (!event._constructed) {
          return
        }
        this._checkLogin().then((res) => {
          if (res === true) {
            this.$refs.comment.replyComment(id, loginname)
          }
        })
      },
      _getTopicDetail() {
        this.showLoading({})
        return this.TopicDetail({
          id: this.id,
          token: trim(this.userInfo.user_token)
        }).then((res) => {
          if (this.$refs.scroll) {
            this.$refs.scroll.scrollToTop(0)
          }
          this.closeLoading()
          if (res.success === true) {
            this.topicData = this.topicDetail
            this.error = ''
            return true
          } else {
            this.error = res.error_msg
            return false
          }
        })
      },
      ...mapActions([
        'TopicDetail',
        'checkUp',
        'checkConfirmLogin'
      ])
    },
    watch: {
      topicData() {
        // 此处用$nextTick等DOM渲染完成 定时重新计算滚动组件
        this.$nextTick(() => {
          setTimeout(() => {
            this.$refs.scroll.refresh()
          }, 200)
        })
      },
      topicDetail(val) {
        this.topicData = val
      },
      id() {
        this._getTopicDetail()
      }
    },
    activated() {
      // 当keepalive缓存中的id 与新获取的id不一样 刷新数据
      if (this.id !== this.$route.params.id) {
        this.is_Collect = null
        this.id = this.$route.params.id
      }
    },
    components: {
      'v-top-back': TopBack,
      'v-scroll': Scroll,
      'v-comment': Comment,
      // 'v-loading': Loading,
      'v-error-tip': ErrorTip
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss">
  @import "~common/scss/const";

  #topic-detail {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    width: 100%;
    overflow: hidden;
    background-color: #eff2f7;
    .scroll-wrapper {
      position: absolute;
      top: 45px;
      bottom: 35px;
      right: 0;
      left: 0;
      overflow: hidden;
      width: 100%;
      .detail-content {
        width: 100%;
        box-sizing: border-box;
        padding: 5px;
        .author {
          background-color: $color-background;
          box-sizing: border-box;
          padding: 10px;
          display: flex;
          .avatar {
            flex: 0 0 60px;
            width: 60px;
            overflow: hidden;
            cursor: pointer;
            img {
              display: inline-block;
              width: 100%;
              border-radius: 5px;
            }
          }
          .info {
            flex: 1;
            display: flex;
            justify-content: space-between;
            margin-left: 10px;
            box-sizing: border-box;
            .left {
              text-align: left;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              white-space: nowrap;
              overflow: hidden;
              padding: 5px 0;
              .name {
                font-size: $font-size-medium;
                color: $color-text-bb;
                cursor: pointer;
              }
              .create-time {
                font-size: $font-size-small;
                color: #999999;
              }
            }
            .right {
              padding: 3px 0;
              text-align: right;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              font-size: $font-size-small;
              color: $color-text-w;
              .lz {
                span {
                  display: inline-block;
                  padding: 3px 5px;
                  border-radius: 2px;
                  background-color: #6ba44e;
                }
              }
              .collect {
                cursor: pointer;
                span {
                  display: inline-block;
                  padding: 3px 5px;
                  border-radius: 2px;
                  background-color: #80bd01;
                }
                &.active span {
                  background-color: #666666;
                }
                &:hover span {
                  background-color: #80bd01;
                }
              }
            }
          }
        }
        .topic-center {
          background-color: $color-background;
          margin-top: 5px;
          box-sizing: border-box;
          padding: 5px;
          .topic-info {
            padding: 15px 5px;
            box-sizing: border-box;
            border-bottom: 1px solid #ccc;
            .topic-tips {
              width: 100%;
              height: 25px;
              overflow: hidden;
              font-size: 0;
              span {
                display: inline-block;
                font-size: $font-size-small;
                color: $color-text-w;
                margin-left: 5px;
                height: 20px;
                line-height: 20px;
                padding: 0 5px;
                border-radius: 4px;
                &:first-child {
                  margin-left: 0;
                }
                &.top {
                  background-color: #39f;
                }
                &.good {
                  background-color: #ff0000;
                }
                &.share {
                  background-color: #f60;
                }
                &.ask {
                  background-color: #009900;
                }
                &.job {
                  background-color: #3a9595;
                }
                &.dev {
                  background-color: #999999;
                }
                &.reply {
                  cursor: pointer;
                  float: right;
                  background-color: #80bd01;
                }
              }
            }
            .topic-title {
              margin-top: 10px;
              .title {
                font-size: 15px;
                display: block;
                width: 100%;
                line-height: 24px;
                font-weight: bold;
                color: $color-text-bb;
                word-break: break-all;
              }
            }
            .topic-reply-count {
              margin-top: 5px;
              height: 20px;
              width: 100%;
              overflow: hidden;
              font-size: $font-size-small;
              color: #999999;
              line-height: 20px;
              display: flex;
              justify-content: space-between;
              .last-reply {
                overflow: hidden;
                white-space: nowrap;
              }
              .topic-count {
                overflow: hidden;
                white-space: nowrap;
                text-align: right;
                span {
                  margin-right: 5px;
                  display: inline-block;
                  align-items: center;
                  i {
                    margin-right: 2px;
                  }
                }
              }
            }
          }
          .topic-content {
            padding: 15px 5px;
            width: 100%;
            box-sizing: border-box;
            overflow: hidden;
            color: $color-text-b;
            font-size: $font-size-medium;
            line-height: 1.5;
            img {
              width: 100%;
              height: 100%;
            }
            table {
              margin: 0 auto;
              font-size: 12px;
              text-align: center;
              width: 100%;
              table-layout: fixed;
              border-collapse: collapse;
              th {
                background-color: #2196f3;
                padding: 8px;
                color: #fff;
              }
              td {
                border: 1px solid #f5f5f5;
                max-width: 120px;
                word-wrap: break-word;
                word-break: break-all
              }
            }
            a {
              color: $color-active;
            }
          }
        }
        .reply-list {
          margin-top: 15px;
          .reply {
            width: 100%;
            padding: 10px;
            box-sizing: border-box;
            background-color: $color-background;
            margin-bottom: 10px;
            border-radius: 3px;
            &:last-child {
              margin-bottom: 0;
            }
            .reply-info {
              width: 100%;
              padding-bottom: 5px;
              border-bottom: 1px solid #ccc;
              display: flex;
              .avatar {
                flex: 0 0 50px;
                width: 50px;
                height: 50px;
                overflow: hidden;
                cursor: pointer;
                img {
                  display: inline-block;
                  width: 50px;
                  height: 50px;
                  border-radius: 50%;
                }
              }
              .info {
                flex: 1;
                display: flex;
                justify-content: space-between;
                margin-left: 10px;
                box-sizing: border-box;
                .left {
                  text-align: left;
                  display: flex;
                  flex-direction: column;
                  justify-content: space-between;
                  white-space: nowrap;
                  overflow: hidden;
                  padding: 5px 0;
                  .name {
                    font-size: $font-size-small;
                    color: $color-text-bb;
                    cursor: pointer;
                  }
                  .create-time {
                    font-size: $font-size-small;
                    color: #999999;
                  }
                }
                .right {
                  padding: 0;
                  text-align: right;
                  display: flex;
                  flex-direction: column;
                  justify-content: space-between;
                  font-size: $font-size-small;
                  color: $color-text-w;
                  .top-group {
                    flex: 0 0 20px;
                    height: 20px;
                    overflow: hidden;
                    font-size: 0;
                    span {
                      display: inline-block;
                      font-size: $font-size-small;
                    }
                    .lz {
                      padding: 3px 5px;
                      border-radius: 2px;
                      background-color: #6ba44e;
                      margin-right: 5px;
                    }
                    .index {
                      padding: 3px 5px;
                      border-radius: 2px;
                      color: $color-text-bb;
                    }
                  }
                  .bottom-group {
                    flex: 0 0 30px;
                    height: 30px;
                    overflow: hidden;
                    font-size: 0;
                    span {
                      display: inline-block;
                      font-size: $font-size-small;
                      line-height: 40px;
                      height: 30px;
                      color: #666666;
                      padding: 0 5px;
                    }
                    .like {
                      cursor: pointer;
                      color: #999999;
                      i {
                        color: #666666;
                      }
                      &.uped i {
                        color: #39f;
                      }
                    }
                    .toreply {
                      margin-left: 3px;
                      cursor: pointer;
                    }
                  }
                }
              }
            }
            .reply-content {
              padding: 15px 5px;
              width: 100%;
              box-sizing: border-box;
              overflow: hidden;
              color: $color-text-b;
              font-size: $font-size-medium;
              line-height: 1.5;
              img {
                width: 100%;
                height: 100%;
              }
              a {
                color: $color-active;
              }
              table {
                margin: 0 auto;
                font-size: 12px;
                text-align: center;
                width: 100%;
                table-layout: fixed;
                border-collapse: collapse;
                th {
                  background-color: #2196f3;
                  padding: 8px;
                  color: #fff;
                }
                td {
                  border: 1px solid #f5f5f5;
                  max-width: 120px;
                  word-wrap: break-word;
                  word-break: break-all
                }
              }
            }
          }
        }
      }
    }
    .error-wrapper {
    }
  }
</style>
